<template>
  <el-card class="box-card">

    <el-form ref="form" v-loading="loading" :model="form" class="tab-inner" label-width="130px">
      <el-tabs v-model="activeName">

        <el-tab-pane label="站点设置" name="site">
          <el-form-item label="站点名称">
            <el-input v-model="form.site.siteName" placeholder="站点名称" />
          </el-form-item>
          <el-form-item label="站点Logo">
            <image-single-selector v-model="form.site.siteLogo"></image-single-selector>
            <div>建议尺寸（32 x 32）</div>
          </el-form-item>
          <el-form-item label="备案信息">
            <el-input v-model="form.site.keepRecordScript" placeholder="备案信息" />
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane v-if="!tenantId" label="Email(SMTP)设置" name="email">
          <el-form-item label="发送邮箱">
            <el-input v-model="form.email.defaultFromAddress" placeholder="发送邮箱" />
          </el-form-item>
          <el-form-item label="发送名称">
            <el-input v-model="form.email.defaultFromDisplayName" placeholder="发送名称" />
          </el-form-item>
          <el-form-item label="邮件服务器">
            <el-input v-model="form.email.smtpHost" placeholder="邮件服务器" />
          </el-form-item>
          <el-form-item label="端口号">
            <el-input v-model="form.email.smtpPort" placeholder="端口号" />
          </el-form-item>
          <el-form-item label="">
            <el-checkbox v-model="form.email.smtpEnableSsl">启用SSL</el-checkbox>
          </el-form-item>
          <!-- <el-divider /> -->
          <el-form-item label="默认凭据">
            <el-checkbox v-model="form.email.smtpUseDefaultCredentials">使用默认凭据</el-checkbox>
          </el-form-item>
          <template v-if="!form.email.smtpUseDefaultCredentials">
            <el-form-item label="用户名">
              <el-input v-model="form.email.smtpUserName" placeholder="用户名" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.email.smtpPassword" placeholder="密码" />
            </el-form-item>
            <el-form-item label="域名">
              <el-input v-model="form.email.smtpDomain" placeholder="域名" />
            </el-form-item>
          </template>
        </el-tab-pane>

        <el-tab-pane label="SEO设置" name="seo">
          <el-form-item label="MetaKeyWords">
            <el-input v-model="form.seo.metaKeyWords" placeholder="MetaKeyWords" />
          </el-form-item>
          <el-form-item label="MetaDescription">
            <el-input v-model="form.seo.metaDescription" type="textarea" placeholder="MetaDescription" />
          </el-form-item>
          <el-form-item label="MetaGenerator">
            <el-input v-model="form.seo.metaGenerator" placeholder="MetaGenerator" />
          </el-form-item>
          <el-form-item label="MetaAuthor">
            <el-input v-model="form.seo.metaAuthor" placeholder="MetaAuthor" />
          </el-form-item>
          <el-form-item label="统计脚本">
            <el-input v-model="form.seo.statScript" type="textarea" placeholder="统计脚本" />
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane v-if="!tenantId" label="敏感信息设置" name="sensitiveInfo">
          <el-form-item label="文本设置">
            <el-switch v-model="form.sensitiveInfo.textEnableAntispam" active-text="垃圾文本检测" />
          </el-form-item>
          <el-divider />
          <el-form-item label="图片设置">
            <el-form-item label="图片监测服务商">
              <el-select v-model="form.sensitiveInfo.imageProvider" placeholder="图片监测服务商">
                <el-option v-for="item in imageProviders" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-switch v-model="form.sensitiveInfo.imageEnablePorn" active-text="图片智能监黄" /><br>
            <el-switch v-model="form.sensitiveInfo.imageEnableTerrorism" active-text="图片暴恐涉政识别" /><br>
            <el-switch v-model="form.sensitiveInfo.imageEnableAd" active-text="图文违规识别" /><br>
            <el-switch v-model="form.sensitiveInfo.imageEnableEnableLive" active-text="图片不良场景识别" />
          </el-form-item>
          <el-divider />
          <el-form-item label="音频设置">
            <el-switch v-model="form.sensitiveInfo.voiceEnableAntispam" active-text="语音检测" />
          </el-form-item>
          <el-divider />
          <el-form-item label="视频设置">
            <el-switch v-model="form.sensitiveInfo.videoEnablePorn" active-text="视频智能鉴黄" /><br>
            <el-switch v-model="form.sensitiveInfo.videoEnableTerrorism" active-text="视频暴恐涉政识别" /><br>
            <el-switch v-model="form.sensitiveInfo.videoEnableAd" active-text="视频图文违规识别" /><br>
            <el-switch v-model="form.sensitiveInfo.videoEnableEnableLive" active-text="视频不良场景识别" />
          </el-form-item>
        </el-tab-pane>
      </el-tabs>

      <el-divider />
      <el-form-item>
        <el-button type="primary" :loading="isSubmitLoading" @click="save">保存</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import abp from 'abp'
import { mapGetters } from "vuex";
import { getSettings, updateSettings } from "@/api/settings";
import ImageSingleSelector from "@/components/ApeSelectors/image-single-selector";

export default {
  name: 'AppSettings',
  components: {
    "image-single-selector": ImageSingleSelector
  },
  data() {
    return {
      activeName: 'site',
      imageProviders: [
        { label: "微信小程序", value: "wxopen" },
        { label: "阿里云", value: "aliyun" }
      ],
      loading: true,
      isSubmitLoading: false,
      form: {
        site: {
          siteName: null,
          siteLogo: null,
          pauseAnnouncement: null
        },
        email: {
          defaultFromAddress: null,
          defaultFromDisplayName: null,
          smtpHost: "127.0.0.1",
          smtpPort: 25,
          smtpEnableSsl: false,
          smtpUseDefaultCredentials: true,
          smtpUserName: "",
          smtpPassword: "",
          smtpDomain: ""
        },
        seo: {
          metaKeyWords: "Csproj",
          metaDescription: "Csproj",
          metaGenerator: "",
          metaAuthor: "",
          statScript: ""
        },
        sensitiveInfo: {
          textEnableAntispam: false,
          imageProvider: "wxopen",
          imageEnablePorn: false,
          imageEnableTerrorism: false,
          imageEnableAd: false,
          imageEnableEnableLive: false,
          voiceEnableAntispam: false,
          videoEnablePorn: false,
          videoEnableTerrorism: false,
          videoEnableAd: false,
          videoEnableEnableLive: false
        }
      }
    };
  },
  computed: {
    ...mapGetters(["tenantId"]),
    isMultiTenancyEnabled() {
      return abp.multiTenancy.isEnabled;
    }
  },
  created() {
    this.activeName = 'site';
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      getSettings().then(result => {
        this.form = result;

        this.loading = false;
        this.$nextTick(() => {
          this.$refs["form"].clearValidate();
        });
      });
    },
    save() {
      this.isSubmitLoading = true;
      this.$refs["form"].validate(valid => {
        if (!valid) {
          this.isSubmitLoading = false;
          this.$message({ message: this.$t("formIsNotValidMessage"), type: "warning" });
          return;
        }

        updateSettings(this.form)
          .then(() => {
            this.$message({ message: "保存成功", type: "success" });
            this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
          })
          .finally(() => {
            this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
          });
      });
    }
  }
};
</script>
<style scoped>
.el-checkbox {
  display: block;
}
</style>
